<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>语义化标签</h1>

    <h2>span 标签</h2>
    <p>
      商品价格：
      <span>368</span>元，优惠价：<span>298</span>元
    </p>

    <h2>文本格式化标签</h2>
    b标签：<b>定义粗体文本</b> <br /><br />
    em标签：<em>表示被强调的文本</em> <br /><br />
    i标签：<i>斜体</i> <br /><br />
    u标签：<u>定义文本下划线</u> <br /><br />
    strong标签：<strong>定义加重语气，表示特别重要的文字</strong><br /><br />
    del标签：<del>定义删除字 </del><br /><br />
    mark标签：<mark>一段需要被高亮的文本</mark>

    <h3>sub 标签</h3>
    <p>碳在氧气中充分燃烧：C + O<sub>2</sub> = CO<sub>2</sub></p>
    <p>铁在氧气中燃烧： 3Fe + 2O<sub>2</sub> = Fe<sub>3</sub>O<sub>4</sub></p>

    <h3>sup 标签</h3>
    <p>2<sup>3</sup> + 3<sup>2</sup> = 17</p>

    <h3>pre 预格式化文本</h3>
    <pre>
  预格式化文本
  
  被包围在 pre标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体

  pre 标签的一个常见应用就是用来表示计算机的源代码。

</pre
    >

    <h3>figure、figcaption 标签</h3>
    <p>
      代表一段独立的内容，与figcaption配合使用。figure
      标签规定独立的流内容（图像、图表、照片、代码等等）。一个独立的引用单元，标签为figure
      元素定义标题
    </p>
    <p>
      <figure>
        <img src="./海绵宝宝.jpg" alt="" />
        <figcaption>小米智能家居，智能门锁</figcaption>
      </figure>

      <figure>
        <img src="./海绵宝宝.jpg" alt="" />
        <figcaption>小米智能家居，平衡车</figcaption>
      </figure>
    </p>
  </body>
</html>
